<template>
  <div class="app-container">
    <div class="filter-container">
      <div v-if="permission == 3">
        <el-button type="primary" class="filter-item" icon="el-icon-edit" @click="addCat(-1)">新增分类</el-button>
      </div>
    </div>
    <el-table
      :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
      :data="tableData"
      v-loading="listLoading"
      element-loading-text="加载中..."
      fit
      highlight-current-row
      style="width: 100%;font-size: 12px;color:#222;font-family: PingFangSC-Regular;margin-bottom: 20px;"
      border
      row-key="ncId"
    >
      <el-table-column prop="ncId" label="编号" sortable></el-table-column>
      <el-table-column label="一级分类">
        <template slot-scope="scope">
          <span>{{ scope.row.parentId == 0 ? scope.row.name : scope.row.parent }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="二级分类">
        <template slot-scope="scope">
          <span>{{ scope.row.parentId != 0 ? scope.row.name : scope.row.parent }}</span>
        </template>
      </el-table-column>
      <el-table-column label="简介">
        <template slot-scope="scope">
          <span>{{ scope.row.parentId > 0 ? scope.row.desc : '---' }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" label="图片">
        <template slot-scope="scope">
          <img
            :src="scope.row.avatar"
            width="60"
            height="60"
            v-show="scope.row.avatar && scope.row.parentId > 0"
          >
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-switch :active-value=1 :inactive-value=0 @change="changeData(scope.row.ncId,scope.row.status,'status')" v-model="scope.row.status" active-text="显示" inactive-text="隐藏"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="100" sortable>
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort" type="number" @blur="changeData(scope.row.ncId,scope.row.sort,'sort')" :min=0 :max=100 :maxlength=3 placeholder="排序"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <b v-if="permission == 3" @click="addCat(scope.$index)" >编辑</b>
          <span v-if="permission == 3" class="color-409">|</span>
          <b v-if="permission == 3" @click="deleteSort(scope.row.ncId, scope.row.parentId)">删除</b>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <addNewsCat v-if="isShowAdd" :catData="catData" @hideAdd="hideAdd" @saveCat="saveCat"></addNewsCat>
  </div>
  
</template>
<script>
import { getNewsCategoryList, delCategory } from "@/api/news";
import { shopManage_courseCategory } from "@/utils/permission";
import { changeTableValue } from "@/api/common";
import addNewsCat from './components/addNewsCat.vue'
export default {
  components: {
    addNewsCat,
  },
  data() {
    return {
      permission: 3,
      tableData: [],
      listQuery: {
        page: 1,
        limit: 20
      },
      total: null,
      listLoading: false,
      isShowAdd:false,
      catData: {},
    };
  },
  created() {
    this.getModelPermission();
    this.initList();
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_courseCategory();
    },
    initList() {
      this.listLoading = true;
      getNewsCategoryList(this.listQuery)
        .then(res => {
          this.tableData = res.data.data.data;
          this.total = res.data.data.total
          this.listLoading = false;
        })
        .catch(err => {
          this.listLoading = false;
          console.log(err);
        });
    },
    deleteSort(ncId, parentId) {
      this.$confirm('确定删除？' + (parentId == 0 ? '删除后，该分类的子分类也会删除。' : ''), '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = { ncId: ncId }
        delCategory(data).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.initList()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSizeChange(val) {
        this.listQuery.limit = val
        this.initList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.initList()
    },
    //更改列表数据
    changeData(ids,val,name){
      let data = {};
      data.table='newscategories';
      data.idName='ncId';
      data.idValue=ids;
      data.name= name;
      data.value=val;
      changeTableValue(data)
        .then(res => {
          
        })
        .catch(err => {
          console.log(err);
        });
    },
    addCat(index) {
      if (index == -1) {
        this.catData = { type: '1', ncId: null, parentId: 0, sort: 0, avatar: '', name: '',desc:'' }
      } else {
        this.catData = {
          type: this.tableData[index].parentId == 0 ? '1' : '2',
          ncId: this.tableData[index].ncId,
          parentId: this.tableData[index].parentId,
          sort: this.tableData[index].sort,
          avatar: this.tableData[index].avatar,
          name: this.tableData[index].name,
          desc: this.tableData[index].desc
          // fileList: this.tableData[index].avatar ? [{ url: this.tableData[index].avatar }] : []
        }
        console.log(this.tableData);
      }
      this.isShowAdd = true
    },
    hideAdd(msg) {
      this.isShowAdd = msg
    },
    saveCat() {
      this.initList()
    },
  }
};
</script>
